frontend-developer：面向 React 19 与 Next.js 15 的前端开发 Skill
frontend-developer 是智雨科技在 SkillHub 发布的企业级 dev-programming Skill（v1.0.0），坐标 @org-02qudk26/frontend-developer，无需 API Key。面向构建 React 组件、响应式布局、客户端状态管理，并强调 React 19、Next.js 15、性能与无障碍。文章说明其定位、核实后的能力边界，以及通过官方安装文档或 skillhub CLI 装入 Cursor、Claude Code 等 skills 目录的步骤与注意事项。
Read More前端页面设置：用 Skill 约束 AI 产出有辨识度的前端界面
SkillHub 社区 Skill「前端页面设置」（@user_d18a1d0d/frontend-design-ld，v1.0.0）面向建站、落地页、仪表盘、React 组件与 Web UI 美化等任务，强调 production-grade 设计质量并避免 generic AI 审美。无需 API Key。文章说明定位与核心能力，并给出 skillhub CLI 安装命令、Cursor/Claude Code/Codex 的 skills 目录及官方安装提示词，附适用场景与目录配置注意事项。
Read Morescroll-experience：为 Agent 补齐滚动叙事与电影感网页实现
scroll-experience（@org-02qudk26/scroll-experience，v1.0.0）由智雨科技在 SkillHub 发布，面向视差叙事、滚动动画、交互式故事与电影感网页体验，无需 API Key。文章说明其定位、核实后的能力边界，以及通过官方安装文档或 skillhub CLI 安装到 Cursor、Claude Code、Codex 等 skills 目录的步骤，并提醒性能与可访问性需自行验证。
Read More生成页面：把 phase-design 设计稿落成单文件 HTML
「生成页面」是 SkillHub 社区 Skill（v1.0.0），无需 API Key。它将 phase-design 上游输出的 DSL JSON 或 SPEC YAML 转换为可在浏览器直接打开的单文件 HTML 原型。文章说明其定位、核心能力、通过 skillhub CLI 或 AI 提示安装到 Cursor 等 Agent 的步骤，以及与设计流水线配合的典型用法与注意事项。
Read More蓝湖skill：把蓝湖设计稿还原为像素级组件代码
蓝湖skill（@user_59e19289/design-lanhu-skill，v1.0.0）是 SkillHub 社区 dev-programming 技能，目标是将蓝湖设计稿还原为目标框架的像素级组件代码。文章说明其定位、requires_api_key 标签含义，并给出 skillhub CLI 与 AI 提示词两种安装方式及 Cursor 等 skills 目录。典型用法为安装后按 SKILL.md 配置密钥，在对话中提供设计稿与框架诉求并人工验收。适合已用蓝湖协作的前端团队。
Read Moreui-ux-pro-max：把 UI/UX 设计知识装进 Agent Skill
ui-ux-pro-max 是智雨科技在 SkillHub 发布的企业级 design-media Skill（v1.0.0），无需 API Key。简介涵盖 50 种风格、21 个调色板、50 组字体搭配、20 类图表，并面向 React、Next.js、Vue、Svelte 等 9 种技术栈。文章说明其定位、核实后的能力边界，以及通过 skillhub CLI 或官方提示词安装到 Cursor、Claude Code 等 skills 目录的步骤，并提醒以包内 SKILL.md 为准、勿臆测未公开的栈名与工作流。
Read More前端用户体验工程：用 Skill 约束生产级界面产出
介绍 SkillHub 技能「生产级前端界面工程规范」（@org-b6kzcl68/frontend-ui-engineering，v1.0.0）。该 Skill 面向新建或修改用户界面，覆盖组件架构与文件同置、组合优于配置、数据与展示分离、状态分层、设计系统与语义化色板、WCAG 2.1 AA、响应式断点、骨架屏与乐观更新、空态错态，并规避 AI 模板审美。说明 SkillHub 提示词与 skillhub CLI 安装方式、Cursor 等 skills 目录，以及典型触发词与适用场景。
Read Morefigma转高保真html：用 Agent Skill 把 Figma 设计稿落成响应式 HTML
figma转高保真html（@user_24c316b5/figma-to-html，v1.0.0）是 SkillHub 社区 dev-programming 类 Skill，通过 Figma MCP 读取设计数据与图片，并结合参考截图生成高保真响应式 HTML。支持「figma 转 html」等关键词或 Figma 链接触发。安装可参考 skillhub.cn/install/skillhub.md，使用 skillhub install 并指定 Cursor 等客户端的 skills 目录。需预先配置 Figma MCP；元数据标注 requires_api_key=false。
Read More前端美化：用 Agent Skill 做有辨识度的生产级界面
「前端美化」是 SkillHub 社区 Skill（@user_c6f1a0f0/114514，v1.0.0，dev-programming），通过 SKILL.md 引导 Agent 在搭建网站、落地页、仪表盘、React 组件或美化 Web UI 时，输出有辨识度、可交付的前端代码，并强调避免 generic AI aesthetics。无需 API Key。本文介绍定位、能力、基于 skillhub CLI 的安装路径（含 Cursor 等 skills 目录）及与官方简介一致的使用方式。
Read Moreangular-developer: Angular's Official Code Generation and Architecture Guidance Skill
angular-developer is an MIT-licensed Agent Skill (v1.0) maintained by the Angular team in the angular/skills repository. It is used to generate Angular code that conforms to the official style guide, covering scenarios such as components, Signals, HTTP, forms, DI, routing, SSR, and ARIA. The skill requires first identifying the Angular version, scaffolding with the CLI, and running ng build after generation. It can be installed with npx skills add https://github.com/angular/skills, and enabled with Gemini CLI, Antigravity, or an editor's built-in Skills mechanism.
Read Moredsh-settings-nav-collapse: A Mobile Navigation Collapse Solution for the DSH Settings Panel
The default layout of the DSH settings panel offers a poor reading experience on narrow screens. The `dsh-settings-nav-collapse` plugin collapses the left navigation bar into a narrow icon rail on narrow screens via a toggle button in the title bar, freeing up width for the main content pane. It supports responsive defaults, state persistence, horizontal panning of the canvas on very narrow screens, and graceful degradation. The plugin uses a style isolation strategy, does not depend on official packages, and is compatible with DSH 0.1.5 and later.
Read Moredsh-annotate: DSH Sidebar Annotation Plugin
dsh-annotate is a sidebar plugin for DeepSeek Harness (DSH), designed to address the difficulty AI faces in accurately locating elements when modifying interfaces. It allows users to directly select elements in the live preview and add annotations, sending structured data directly to the AI without screenshots or guesswork. Core features include annotating an element in just two clicks, supporting SPA route switching, and detecting the tech stack and local proxy. Installation is simple: clone the repository into the DSH plugin directory and restart. It is especially suitable for web UI modifications and frontend adjustments, replacing vague descriptions with structured data to improve collaboration efficiency.
Read MoreDeepSeek Harness Plugin: dsh-uisketch
The `dsh-uisketch` plugin integrates the `ui-sketch-to-ai` canvas editor into the DSH Web interface. Users can drag and drop components, adjust properties, and export a JSON layout description (excluding background image data). Accessed via a sidebar toggle or full-screen overlay, it enables lightweight UI design and AI data handoff.
Read More@ddtcorex/dsh-maestro-devkit: DeepSeek Harness General-Purpose Development Toolkit
`@ddtcorex/dsh-maestro-devkit` is a front-end dev toolset for DeepSeek Harness (DSH), designed to address pain points in view review, style debugging, and component isolation. Its core features include multi-viewport screenshots, hot module replacement (HMR), real-time style inspection, component sandbox isolation, and development support for Cordis and Skills. The toolset is tunnel-aware, adapting to local and remote development scenarios. **Note**: This plugin has been marked as **Retired**. Because the UI workflow is incomplete and there is feature overlap (some features have been replaced by core extensions), no new versions are being accepted for release. The existing 0.3.2 version can still be installed for rollback, and developers can refer to its approach or use Chrome Dev
Read MoreDeepSeek Harness HTML Template Library Plugin (satan9394/dsh-html-template-library)
satan9394/dsh-html-template-library is a DeepSeek Harness (DSH) skill plugin designed to resolve issues such as disorganized template management and inconsistent design in HTML page construction. It provides a standardized methodology, featuring 34 design systems, selection matching, clone adaptation, multi-layout preview, and reusable design tokens to support rapid generation of structured HTML. Users must manually install the plugin files into the DSH directory. Please review the source code before installation to confirm the terms of use. This plugin is suitable for developers seeking design consistency.
Read MoreDSH Frontend and Mobile Development Skill (satan9394/dsh-frontend-mobile)
This is a plugin designed for DeepSeek Harness (DSH), aiming to address the shortcomings of general-purpose models in generating frontend and mobile code, such as React Native and Next.js. Maintained by user satan9394, it provides specialized context and capabilities for these development tasks. When using it, refer to the source repository for installation instructions and pay attention to permissions and security.
Read Moredsh-page-preview: Directly preview DSH-generated pages in the browser
# Introduction When developing frontend pages with DSH (DeepSeek Harness), verifying the results typically involves a fixed workflow: prompting the model to generate HTML, copying it to a local file, and then opening it in a browser. Every round of modifications requires repeating the copy and switch steps. dsh-page-preview integrates this step into DSH's web interface: the HTML code block output by the model can be rendered in-place as an interactive preview, while local projects or online URLs can also be viewed in real-time within a floating window. The following introduces its positioning, features, installation steps, and typical usage. # What is this dsh-page-preview is a DSH web plugin. The current version is 1.0.0, maintained by watericetangcw, and adopts...
Read MoreFrameEvidence: Bounded Figma Read-Only Design Evidence for DeepSeek Harness
FrameEvidence is a read-only Figma plugin for DeepSeek Harness, designed to address the context bloat and credential exposure risks faced by agents when retrieving design data. It provides two core tools, `figma_inspect` and `figma_render`: the former returns a bounded node tree, while the latter provides a temporary rendering URL, thereby controlling data scale without exposing the Figma PAT. The plugin strictly adheres to security boundaries: credentials are read solely via host environment variables, writing to Figma is prohibited, redirects are rejected, and API responses are limited by both byte size and node count. Installation requires meeting Node.js version requirements and pinning to a specific commit via the DSH command. Users must create a Figma PAT with read-only permissions and configure environment variables.
Read MoreDSH Plugin dsh-plugin-message-timeline-navigation: Add message timeline on the left side of the web session
dsh-plugin-message-timeline-navigation is a pure front-end auxiliary plugin developed specifically for the DSH Web Client, aiming to solve the problem of low efficiency in manually scrolling to locate messages during long sessions. The plugin does not modify the DSH core; instead, it displays a Codex-style message timeline on the left side of the conversation view via an overlay, where each tick corresponds to a user turn and its complete Agent reply. Core features include: previewing message cards and a cascade expansion effect when hovering over a tick; smoothly jumping to the corresponding message and briefly highlighting it when clicking a tick; and automatically highlighting the current reading turn's tick while scrolling to indicate progress. The plugin tracks only user messages to keep the timeline dense and predictable. Installation is recommended using a pnpm environment by executing the `dsh plugin add` command. It requires React.
Read Moredsh-md-html-render: Render Markdown to Standalone HTML in DSH
dsh-md-html-render is a DeepSeek Harness (DSH) plugin maintained by LeslieWylie and released under the MIT license. The plugin aims to render Markdown into standalone, self-contained HTML pages without external dependencies, making it suitable for forwarding, archiving, or offline viewing. It provides two entry points: a model-callable `md_html_render` tool that supports generating and saving HTML within a headless profile, and an MD drawer in the Web GUI that allows users to browse, edit, and export Markdown within the session. The plugin's core features include no runtime dependencies, and all file operations are performed through the harness fs service and s.
Read Moredsh-ui-workspace: Composable workspace primitives for DeepSeek Harness browser extension
`@ch4acko3/dsh-ui-workspace` is a workspace UI library designed specifically for the DeepSeek Harness UI browser plugin. Built on top of `dsh-ui-container`, it decomposes common complex interactions into composable UI primitives, including draggable panel stacks, recursive tree views, tabbed document editors, document renderers, and action entry points, while supporting VS Code-style resource manager behavior. This library focuses on resolving interface skeleton scaffolding issues, leaving product-specific navigation logic, data providers, commands, and style implementations to the user. When installing, `dsh-ui-container` must be installed first in the same DSH profile, followed by `dsh-ui-workspace`. Environment requirements: N...
Read Moredsh-sticky-disclosure: Collapse Expandable Blocks in DSH Web Sessions with One Click
`dsh-sticky-disclosure` is an MIT-licensed plugin for the DSH Web client, maintained by Han-1413141, designed to address the problem of accumulated collapsible blocks (such as Think, tool cards, command cards, etc.) during long sessions, which makes them difficult to manage. The plugin allows users to collapse all expanded blocks with a single click via a persistent button in the bottom-right corner of the chat area or a custom keyboard shortcut (default: Ctrl+Alt+C / ⌘⌥C), with a real-time counter displayed. When a block scrolls out of the viewport, its title is automatically pinned to the top for one-click collapsing. The plugin is implemented in pure DOM, does not modify application code, supports both dark and light themes, and automatically restores the original state after uninstallation. Installation requires Node.js ≥ 20 and a DSH environment; it takes effect after installation via a PowerShell script and a restart. Keyboard shortcut settings are saved
Read MoreDSH Session Pins: Providing Persistent Pinned Session Menus for DeepSeek Harness
The DSH plugin `dsh-session-pins` developed by alooshxl aims to solve the difficulty of finding frequently used sessions in the DeepSeek Harness Web sidebar. This plugin is based on the MIT license and integrates through the public `sidebar.footer.action` slot, without relying on private UI source code or patching the host. Its core functionality provides a pinned sessions menu at the bottom of the sidebar, supporting the pinning of regular, non-empty sessions, with data stored in the browser's local `localStorage`, requiring no API key. The plugin features a robust validation mechanism, limiting the maximum number of pinned items to 100, and synchronizes across same-origin tabs via the `storage` event. Installation requires the `dsh plugin` command to add a specified Git tag.
Read More# Figma-Create-Design-System-Rules: Develop Project-Specific Design System Rules for Agents
This is an introduction to `figma-create-design-system-rules` in the openai/skills curated catalog: On the premise of connecting Figma MCP, it analyzes the codebase and generates project-level design system rules, constraining component paths, Design Tokens, styling solutions and the Figma-to-code workflow, and writes them into `CLAUDE.md`, `AGENTS.md` or `.cursor/rules/figma-design-system.mdc` respectively, to alleviate problems such as random use of spacing, hard-coded colors, and repeated creation of components when AI implements UI. The article verifies the installation method, five-step workflow and precautions.
Read MoreBootstrap 5 Alerts: Styling and Scenarios for Notification Messages
The Bootstrap 5 Alert component is used to display prompt messages, status feedback, or operation results. It supports multiple styles, animations, and interactive features, and is fully responsive. To use it, you need to first include the Bootstrap 5 CSS and JS files. A basic alert is created using the `alert` class and color theme classes (such as `alert-primary` for blue, `alert-success` for green, etc.). The `alert-dismissible` class can be added to enable a close button, and `fade show` can be used to enable fade-in and fade-out animations. Functionally, the `alert-link` class can unify link colors, and JavaScript can control automatic hiding (e.g., closing after 5 seconds). Typical scenarios include form submission success prompts, deletion operation confirmations, system notifications, etc. For customization, default styles can be overridden via CSS. Mastering color classes, close buttons, animations, and JavaScript interactions allows flexible enhancement of user experience and prompt clarity.
Read MoreBootstrap 5 Form Groups: Tips for Grouping Controls and Aligning Labels
Bootstrap 5 form groups are a core tool for organizing form elements in web development. They wrap related controls using the `.form-group` class to achieve style consistency and layout management. Basic usage requires combining with `.form-label` (label styling), `.form-control` (input styling), and spacing classes (such as `mb-3`). There are three label alignment methods: horizontal arrangement (implemented with `.row` + `.col-*` to place labels and input fields in the same row), floating labels (`.form-floating`, where the label automatically floats when the input is focused), and vertical arrangement (default, with labels on top, suitable for short forms). When grouping controls, use `.form-check` for radio/multi-select buttons and `.form-select` for dropdown menus. By skillfully applying these techniques, you can build beautiful and user-friendly forms, enhancing the user experience. It is recommended to choose the alignment method according to the scenario and master the Bootstrap 5 form system proficiently.
Read MoreBootstrap 5 Navigation Components: Implementation of Tabs and Breadcrumb Navigation
To use Bootstrap 5 navigation components, you first need to include its CSS and JS files (including Popper.js) in your HTML. Core components include tab navigation and breadcrumb navigation. **Tab Navigation (Tabs)** is used for categorizing content switching: Implemented via `.nav-tabs` (or `.nav-pills` for pill-shaped navigation), it requires wrapping navigation items with `.nav`. Navigation buttons (`nav-link`) are associated with content panels using `data-bs-toggle="tab"` and `data-bs-target`. Content areas are wrapped in `.tab-content` containing `.tab-pane`, where `fade` and `active` classes control transitions and default display. Accessibility attributes are supported to enhance user experience. **Breadcrumb Navigation** displays page hierarchy: Wrapped with the `.breadcrumb` class and an ordered list, each level is represented by `.breadcrumb-item`, with `.active` marking the current page. The default separator can be customized via CSS (e.g., `content: "›"`). It is pure HTML/CSS and does not require JavaScript. **Summary**: Tabs rely on JS for content switching and are suitable for categorized content; breadcrumbs are static and ideal for hierarchical display. Both support accessibility attributes. Bootstrap 5 provides rich extensions (e.g., pill-style, custom separators), enabling quick implementation.
Read MoreBootstrap 5 Dropdown Menus: Click-Expanded Navigation Option Lists
The Bootstrap 5 dropdown menu solves the space - occupying problem caused by a large number of menu items by collapsing to save space while keeping the interface concise. Before use, you need to introduce Bootstrap 5 CSS, Popper.js and Bootstrap JS in the correct order (the order cannot be wrong). The core structure consists of an outer `<div class="dropdown">` container. Inside it, there is a trigger button (`class="btn dropdown - toggle"` with the `data - bs - toggle="dropdown"` attribute) and an option list (`class="dropdown - menu"`). The option list is wrapped with `<li>`, and the menu items are `dropdown - item`, which supports `active` (highlighted), `disabled` (disabled) and divider lines (`dropdown - divider`). The interaction logic is built - in: clicking the trigger button expands or collapses the list, and clicking the menu item automatically closes the list without additional JS. Advanced usage supports right - alignment (`dropdown - menu - end`) and upward expansion (the `dropup` class). When using, you need to ensure that the dependencies are correctly introduced and the structure is correct (such as menu items inside `<li>`), and you can quickly implement a concise navigation menu.
Read MoreFrom Mobile to PC: Implementation Steps of Responsive Layout with Bootstrap 5
Bootstrap 5 is an efficient tool for implementing responsive web layouts, with core advantages including automatic adaptation to multi-device responsive design, a 12-column grid system, rich components, and a lightweight CDN introduction method. When using it, CSS and JS files must first be introduced via CDN in HTML, and the key is to set the `<meta name="viewport">` tag to ensure correct display on mobile devices. Its responsive core lies in the grid system: the page is divided into 12 columns, content is wrapped with `row`, and `col-*` specifies the column width (`*` is the number of columns). Breakpoint prefixes (xs < 576px, sm ≥ 576px, md ≥ 768px, lg ≥ 992px, xl ≥ 1200px) are used to adapt to different screens. Containers are divided into fixed-width `container` and full-screen `container-fluid`. In practice, the grid system can quickly achieve adaptive layouts for content areas and sidebars (e.g., `col-lg-9` for content area and `col-lg-3` for sidebar, which automatically stack into `col-sm-12` on small screens). Utility classes like `text-center` and `bg-*` can optimize styles. Mastering these core points allows pages to be displayed properly on mobile phones, tablets
Read MoreBootstrap 5 Cards: Creating Clean and Attractive Content Display Units
The Bootstrap 5 Card component serves as a "container box" for organizing information neatly, capable of orderly containing content such as images, text, and buttons. It supports responsive layouts to adapt to different devices. The basic structure uses `.card` as the container, with internal classes like `.card-img-top` (top image), `.card-body` (content area containing `.card-title` for titles and `.card-text` for text) to achieve content layering. Core components support various combinations: images can be placed at the top or overlapped with text (using `.card-img-overlay`); lists are presented via `.list-group`; and action buttons can be placed in `.card-footer` or within the card body. In terms of styling and layout, appearance can be adjusted through width control, `shadow-*` utility classes (light/default/dark shadows), and `text-center` (center alignment). For responsive arrangement, `.row` combined with `.row-cols-*` is used to implement multi-column layouts (e.g., 1 column on small screens, 3 columns on medium screens). Precautions: Images must include the `alt` attribute and the `img-fluid` class; avoid duplicate style conflicts; and use spacing utility classes reasonably to prevent content crowding. Cards can efficiently build scenarios like product lists and user profiles, flexibly adapting to content combinations ranging from simple to complex.
Read MoreFrontend Developers Learning Node.js: The Mindset Shift from Browser to Server
This article introduces the necessity and core points for front-end developers to learn Node.js. Based on Google Chrome's V8 engine, Node.js enables JavaScript to run on the server-side, overcoming the limitations of front-end developers in building back-end services and enabling full-stack development. Its core features include "non-blocking I/O" (handling concurrent requests through the event loop), "full-access" environment (capable of operating on files and ports), and the "CommonJS module system". For front-end developers transitioning to back-end roles, mindset shifts are required: changing from the sandboxed (API-limited) runtime environment to a full-access environment; transforming asynchronous programming from an auxiliary task (e.g., setTimeout) to a core design principle (to avoid server blocking); and adjusting from ES Modules to CommonJS (require/module.exports) for module systems. The learning path includes: mastering foundational modules (fs, http), understanding asynchronous programming (callbacks/Promise/async), developing APIs with frameworks like Express, and exploring the underlying principles of tools such as Webpack and Babel. In summary, Node.js empowers front-end developers to build full-stack capabilities without switching programming languages, enabling them to understand server-side logic and expand career horizons. It is a key tool for bridging the gap between front-end and back-end development.
Read MoreNode.js npm Tools: A Comprehensive Guide from Installation to Package Management
This article introduces the core knowledge of Node.js and npm. Node.js is a JavaScript runtime environment based on Chrome's V8 engine, and npm is its default package management tool for downloading, installing, and managing third-party code packages. **Installation**: Node.js can be installed on Windows, Mac, and Linux systems via the official website or package managers (npm is installed alongside Node.js). After installation, verify with `node -v` and `npm -v`. **Core npm Functions**: - Initialize a project with `npm init` to generate `package.json` (project configuration file). - Install dependencies: local (default, project-only) or global (`-g`, system-wide); categorized as production (`--save`) or development (`--save-dev`) dependencies. - Manage dependencies: view, update, uninstall (`npm uninstall`), etc. **Common Commands**: `npm install` (Install), `npm list` (View), `npm update` (Update), etc. For slow domestic access, accelerate with Taobao mirror (`npm config set registry`) or cnpm. **Notes**: Avoid committing `node_modules` to Git, use version numbers (`^` or `~`) reasonably, and prioritize local dependency installation. npm is a core tool for Node.js development; mastering its usage enhances efficiency.
Read More